<template>
  <div>
    <a-modal
      cancel-text="取消"
      :maskClosable="false"
      :title="title"
      @cancel="handleClose"
      :destroyOnClose="true"
      @ok="handleOk"
      :width="modalWidth"
      :visible="visible"
      :confirmLoading="confirmLoading"
      footer=""
    >
      <div class="flex flex-a-c flex-j-c paginationBox">
        <a-pagination
          :total="ipagination.total"
          v-model="ipagination.current"
          hideOnSinglePage
          :page-size-options="ipagination.pageSizeOptions"
          :page-size="ipagination.pageSize"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
          :show-total="ipagination.showTotal"
        />
        <div class="dowloadBox">
          <a-button
            :loading="confirmLoading"
            @click="
              handleOk('meQrcode', `${codeName} (${ipagination.current}页)`)
            "
            type="primary"
            >{{ confirmLoading ? "下载中" : "下载当前页" }}</a-button
          >
        </div>
      </div>
      <div class="flex flex-a-c  flex-wrap " id="meQrcode">
        <div v-for="(item, index) in dataSourceList" :key="index" class="code">
          <vue-qr
            :text="item.text"
            :size="200"
            :margin="0"
            colorDark="black"
            colorLight="white"
          ></vue-qr>
          <div class="labelBox">{{ item.label }}</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import VueQr from "vue-qr";
import Canvas2Image from "@/unit/canvas2Image.js";
import html2canvas from "html2canvas";
export default {
  components: { VueQr },
  props: {},
  data() {
    return {
      QRCodeURL: [], //存放生成的二维码图片地址
      dataSource: [],
      dataSourceList: [], //分页后的数据
      visible: false,
      confirmLoading: false,
      modalWidth: 1460,
      title: "",
      codeName: "", // 二维码名称
      /* 分页参数 */
      ipagination: {
        current: 1, //当前页数
        pageSize: 48,
        showTotal: (total, range) => {
          return " 共" + total + "条";
        },
        showQuickJumper: false,
        showSizeChanger: false,
        total: 0,
      },
    };
  },

  methods: {
    showModal(dataSource, codeName) {
      this.visible = true;
      this.dataSource = dataSource;
      this.ipagination.total = dataSource.length;
      this.codeName = codeName;
      this.changeData(this.ipagination.current, this.ipagination.pageSize); //获取数据后调用一次分页方法
    },
    // 页码改变的回调，参数是改变后的页码及每页条数
    pageChange(page, pageSize) {
      this.changeData(page, pageSize);
      this.$forceUpdate();
    },
    // 下拉选项改变， 参数是改变后的页码及每页条数
    onShowSizeChange(current, pageSize) {
      this.ipagination.pageSize = pageSize;
      this.changeData(current, pageSize);
    },
    // 分页改变时,获取对应的数据，动态改变数据
    changeData(page, pageSize) {
      var p = (page - 1) * pageSize;
      var pSize = page * pageSize;
      var dataSourceList = [];
      this.dataSource.forEach((item, index) => {
        if (p <= index && index < pSize) {
          dataSourceList.push(item);
        }
      });
      this.dataSourceList = dataSourceList;
    },
    // 关闭
    handleClose() {
      if (this.confirmLoading) {
        this.$message.error("二维码下载中,请勿关闭弹框...");
      } else {
        this.visible = false;
        this.QRCodeURL = [];
        this.dataSource = [];
        this.visible = false;
        this.confirmLoading = false;
        this.$emit("setRowKeys");
      }
    },
    // 生成二维码
    handleOk(id, downloadName) {
      let that = this;
      //打开loading
      that.confirmLoading = true;
      //生成图片之前，需先将整体的滚动条隐藏掉，否则生成出来的照片会偏移
      document.getElementById("app").style.overflowY = "hidden";
      //两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
      var shareContent = document.getElementById(id);
      var width = shareContent.offsetWidth;
      var height = shareContent.offsetHeight;
      var canvas = document.createElement("canvas");
      var scale = 6; //这里为了下载出更清晰的图片，值越大越清晰

      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.getContext("2d").scale(scale, scale);

      var opts = {
        scale: 1, //不管上面的scale是多少倍，这里只能取1，否则会显示不完全
        canvas: canvas,
        logging: true,
        width: width,
        height: height,
      };
      html2canvas(shareContent, opts).then(function(canvas) {
        //这个方式是直接将canvas保存为图片的，具体参数可自行查看源码
        var img = Canvas2Image.saveAsImage(
          canvas,
          canvas.width,
          canvas.height,
          "png",
          downloadName
        );
        //这个方式只是提供展示图片的功能，暂时没有用到
        // var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height,'PNG');
        //  document.body.appendChild(img);

        //生成图片之前，需先将整体的滚动恢复为之前的状态
        document.getElementById("app").style.overflowY = "scroll";
        //关闭loading
        that.confirmLoading = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.code {
  padding: 10px 10px 0 10px;
  margin: 5px;
  border: 1px solid #000;
}
.labelBox {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 4px 0;
}
#meQrcode {
  padding: 10px;
}
.paginationBox {
  position: relative;
  .dowloadBox {
    margin: 10px 0;
    button {
      position: absolute;
      right: 16px;
      bottom: 2px;
    }
  }
}
</style>
